<template>
  <el-card style="box-shadow: none;">
    <div class="container" >
      <div class="row row--top-40" style="display: flex; align-items: center;">
        <div class="col-md-12" style="display: flex; align-items: center;">
          <svg t="1707295744799" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="1302" width="30" height="30"><path d="M481.28 204.8c158.35136 0 286.72 128.36864 286.72 286.72 0 70.7584-25.64096 135.53664-68.11648 185.5488l123.12576 123.2896a15.36 15.36 0 1 1-21.72928 21.7088l-122.51136-122.6752A285.73696 285.73696 0 0 1 481.28 778.24c-158.35136 0-286.72-128.36864-286.72-286.72s128.36864-286.72 286.72-286.72z m0 30.72C339.88608 235.52 225.28 350.12608 225.28 491.52s114.60608 256 256 256S737.28 632.91392 737.28 491.52s-114.60608-256-256-256z" fill="#062C3D" p-id="1303"></path><path d="M356.47488 507.4944c12.98432 32.0512 32.78848 57.9584 59.63776 78.1312 27.32032 20.52096 60.53888 34.93888 99.86048 43.17184l-8.3968 40.09984c-44.99456-9.4208-83.7632-26.25536-116.08064-50.52416-32.80896-24.65792-57.22112-56.58624-72.97024-95.49824l37.94944-15.36z" fill="#76cb02" p-id="1304" data-spm-anchor-id="a313x.collections_detail.0.i0.33973a817vAg9o" class="selected"></path></svg>
          <h2 class="row__title" style="margin-left: 10px; justify-content: flex-start;">筛选搜索</h2>
        </div>
      </div>
      <el-form @submit.prevent ref="inputForm" :inline="true" :model="inputForm" class="demo-form-inline" style="margin-left: 20px" >
        <el-row>
          <el-form-item>
            <div class="form-control">
              <input type="text" required v-model="inputForm.studentId" @keyup.enter="searchDataList"/>
              <label>
                <span style="transition-delay:0ms">输</span><span style="transition-delay:50ms">入</span><span style="transition-delay:100ms">学</span><span style="transition-delay:150ms">生</span><span style="transition-delay:200ms">I</span><span style="transition-delay:250ms">D</span>
              </label>
            </div >
          </el-form-item>
          <el-form-item>
            <div class="form-control">
              <input type="text" required v-model="inputForm.taskName" @keyup.enter="searchDataList"/>
              <label>
                <span style="transition-delay:0ms">输</span><span style="transition-delay:50ms">入</span><span style="transition-delay:100ms">任</span><span style="transition-delay:150ms">务</span><span style="transition-delay:200ms">名</span><span style="transition-delay:250ms">称</span>
              </label>
            </div >
          </el-form-item>
          <el-form-item>
            <el-select v-model="inputForm.taskAllocation" clearable placeholder="选择任务分配方式" style="width: 200px;margin-top: 15px" @keyup.enter="searchDataList">
              <el-option
                  v-for="item in inputForm.allocationOptions"
                  :key="item.taskAllocation"
                  :label="item.label"
                  :value="item.taskAllocation">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="inputForm.completionStatus" clearable placeholder="选择任务完成情况" style="width: 200px;margin-top: 15px" @keyup.enter="searchDataList">
              <el-option
                  v-for="item in inputForm.completionOptions"
                  :key="item.completionStatus"
                  :label="item.label"
                  :value="item.completionStatus">
              </el-option>
            </el-select>
          </el-form-item>
          <ul class="form-control" style="margin-left: -45px;margin-top: 20px">
            <li class="icon-content" >
              <form>
                <button
                    class="link"
                    data-social="inputDate"
                    type="button"
                    @click="searchDataList"
                >
                  <svg t="1707225141071" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                       p-id="1299" width="200" height="200">
                    <path d="M902.174374 942.511058c6.66684 6.66684 15.400758 9.999748 24.133653 9.999748s17.466814-3.332908 24.13263-9.999748c13.33368-13.332656 13.33368-34.932604 0-48.266283L816.820404 760.610194c79.380932-79.128175 124.171044-186.079022 124.171044-299.366182 0-233.349629-189.833533-423.183162-423.183162-423.183162-233.333256 0-423.166789 189.834556-423.166789 423.184185s189.833533 423.183162 423.166789 423.183162c35.750225 0 72.399937-4.933359 108.932991-14.650675 18.23327-4.849448 29.067013-23.532973 24.216541-41.74987-4.833075-18.216897-23.532973-29.049616-41.74987-24.216541-30.815843 8.200776-61.566194 12.350283-91.399663 12.350283-195.700147 0-354.899986-159.216211-354.899986-354.916359s159.199839-354.916359 354.899986-354.916359 354.916359 159.216211 354.916359 354.916359c0 106.899682-47.566342 207.082382-130.516566 274.866185-14.59951 11.932774-16.766872 33.432437-4.833075 48.03297"
                          fill="currentColor" p-id="1300"></path>
                  </svg>
                </button>
              </form>
            </li>
          </ul>
        </el-row>
      </el-form>
    </div>
  </el-card>
  <el-card style="box-shadow: none;margin-top: 20px" >
    <div class="container" >
      <div class="row row--top-40" style="display: flex; align-items: center;">
        <div class="col-md-12" style="display: flex; align-items: center;">
          <svg t="1708411655166" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16046" id="mx_n_1708411655166" data-spm-anchor-id="a313x.search_index.0.i10.129b3a81vaR55s"
               width="26" height="26"><path d="M764.945067 915.933867H259.054933a95.675733 95.675733 0 0 1-95.573333-95.573334v-590.165333a95.675733 95.675733 0 0 1 95.573333-95.573333H334.506667a27.306667 27.306667 0 0 1 0 54.613333h-75.451734a40.96 40.96 0 0 0-40.96 40.96v590.165333a40.96 40.96 0 0 0 40.96 40.96h505.890134a40.96 40.96 0 0 0 40.96-40.96v-590.165333a40.96 40.96 0 0 0-40.96-40.96h-75.3664a27.306667 27.306667 0 0 1 0-54.613333h75.3664a95.675733 95.675733 0 0 1 95.573333 95.573333v590.165333a95.675733 95.675733 0 0 1-95.573333 95.573334z" fill="#464545" p-id="16047" data-spm-anchor-id="a313x.search_index.0.i9.129b3a81vaR55s" class="selected"></path><path d="M281.992533 404.258133a23.978667 23.978667 0 0 1-2.696533-0.136533c-0.8704 0-1.706667-0.221867-2.645333-0.392533s-1.706667-0.392533-2.594134-0.648534-1.706667-0.5632-2.5088-0.904533-1.706667-0.733867-2.423466-1.143467-1.553067-0.887467-2.286934-1.365333-1.467733-1.041067-2.167466-1.604267-1.348267-1.160533-1.979734-1.792a27.477333 27.477333 0 0 1-8.004266-19.3024 23.586133 23.586133 0 0 1 0.136533-2.696533c0.085333-0.887467 0.221867-1.706667 0.392533-2.645333a23.1424 23.1424 0 0 1 0.6656-2.594134c0.256-0.853333 0.5632-1.706667 0.887467-2.525866s0.733867-1.621333 1.143467-2.4064 0.887467-1.553067 1.3824-2.304 1.024-1.467733 1.5872-2.1504a25.122133 25.122133 0 0 1 1.809066-1.9968c0.631467-0.631467 1.297067-1.2288 1.979734-1.809067s1.416533-1.092267 2.167466-1.5872a23.773867 23.773867 0 0 1 2.286934-1.365333 26.112 26.112 0 0 1 2.423466-1.143467c0.8192-0.341333 1.706667-0.648533 2.5088-0.904533s1.706667-0.477867 2.594134-0.648534a23.552 23.552 0 0 1 2.645333-0.392533 25.736533 25.736533 0 0 1 5.376 0 22.9888 22.9888 0 0 1 2.645333 0.392533 27.0848 27.0848 0 0 1 5.12 1.553067 29.252267 29.252267 0 0 1 4.7104 2.5088 24.951467 24.951467 0 0 1 2.1504 1.5872c0.699733 0.580267 1.365333 1.1776 1.9968 1.809067a25.122133 25.122133 0 0 1 1.809067 1.9968c0.5632 0.682667 1.092267 1.416533 1.5872 2.1504a26.350933 26.350933 0 0 1 1.365333 2.304 25.8048 25.8048 0 0 1 1.143467 2.4064 28.78464 28.78464 0 0 1 1.570133 5.12c0.187733 0.887467 0.3072 1.706667 0.392534 2.645333s0.136533 1.706667 0.136533 2.696533 0 1.792-0.136533 2.679467-0.221867 1.706667-0.392534 2.645333-0.4096 1.706667-0.6656 2.594134A25.821867 25.821867 0 0 1 307.2 387.413333a26.112 26.112 0 0 1-1.143467 2.423467 23.773867 23.773867 0 0 1-1.365333 2.286933 25.224533 25.224533 0 0 1-1.5872 2.167467c-0.5632 0.682667-1.1776 1.365333-1.809067 1.9968a29.678933 29.678933 0 0 1-4.1472 3.413333c-0.733867 0.477867-1.518933 0.938667-2.304 1.365334s-1.5872 0.802133-2.4064 1.143466-1.706667 0.631467-2.525866 0.904534a26.197333 26.197333 0 0 1-2.594134 0.648533c-0.8704 0.170667-1.706667 0.3072-2.645333 0.392533a23.483733 23.483733 0 0 1-2.679467 0.1024zM281.992533 568.32a27.5456 27.5456 0 0 1-19.3024-7.9872c-0.631467-0.631467-1.245867-1.314133-1.809066-1.9968s-1.092267-1.416533-1.5872-2.167467-0.955733-1.501867-1.3824-2.286933a29.986133 29.986133 0 0 1-2.030934-4.932267c-0.273067-0.853333-0.477867-1.706667-0.6656-2.594133s-0.3072-1.706667-0.392533-2.645333-0.136533-1.792-0.136533-2.696534 0-1.792 0.136533-2.679466 0.221867-1.706667 0.392533-2.645334 0.392533-1.706667 0.6656-2.594133a26.146133 26.146133 0 0 1 0.904534-2.525867 25.6 25.6 0 0 1 1.1264-2.4064 27.921067 27.921067 0 0 1 2.9696-4.4544 25.122133 25.122133 0 0 1 1.809066-1.9968 27.306667 27.306667 0 0 1 38.6048 0 25.122133 25.122133 0 0 1 1.809067 1.9968c0.5632 0.682667 1.092267 1.416533 1.5872 2.1504a24.046933 24.046933 0 0 1 1.365333 2.304 25.8048 25.8048 0 0 1 1.143467 2.4064 26.146133 26.146133 0 0 1 0.904533 2.525867c0.256 0.853333 0.477867 1.706667 0.6656 2.594133s0.3072 1.706667 0.392534 2.645334 0.136533 1.792 0.136533 2.679466 0 1.706667-0.136533 2.696534-0.221867 1.706667-0.392534 2.645333-0.4096 1.706667-0.6656 2.594133a25.821867 25.821867 0 0 1-0.904533 2.5088 26.112 26.112 0 0 1-1.143467 2.423467 23.773867 23.773867 0 0 1-1.365333 2.286933c-0.494933 0.750933-1.024 1.467733-1.5872 2.167467s-1.1776 1.365333-1.809067 1.9968a27.5456 27.5456 0 0 1-19.3024 7.9872zM281.992533 732.279467c-0.887467 0-1.706667 0-2.696533-0.136534s-1.706667-0.221867-2.645333-0.392533-1.706667-0.4096-2.594134-0.6656-1.706667-0.5632-2.5088-0.904533a26.112 26.112 0 0 1-2.423466-1.143467 23.773867 23.773867 0 0 1-2.286934-1.365333c-0.750933-0.494933-1.467733-1.024-2.167466-1.5872s-1.348267-1.1776-1.979734-1.809067a25.122133 25.122133 0 0 1-1.809066-1.9968 27.921067 27.921067 0 0 1-4.113067-6.8608 26.043733 26.043733 0 0 1-0.887467-2.525867 21.947733 21.947733 0 0 1-0.6656-2.577066c-0.170667-0.887467-0.3072-1.706667-0.392533-2.6624a26.368 26.368 0 0 1 0-5.358934c0.085333-0.887467 0.221867-1.706667 0.392533-2.6624a23.1424 23.1424 0 0 1 0.6656-2.594133c0.256-0.836267 0.546133-1.706667 0.887467-2.5088s0.733867-1.706667 1.143467-2.423467 0.887467-1.553067 1.3824-2.286933 1.024-1.467733 1.5872-2.167467 1.1776-1.365333 1.809066-1.9968 1.297067-1.2288 1.979734-1.792 1.416533-1.109333 2.167466-1.604266 1.501867-0.938667 2.286934-1.365334 1.604267-0.802133 2.423466-1.143466 1.706667-0.631467 2.5088-0.887467 1.706667-0.477867 2.594134-0.6656 1.706667-0.3072 2.645333-0.392533a25.736533 25.736533 0 0 1 5.376 0c0.887467 0.085333 1.706667 0.221867 2.6624 0.392533a25.924267 25.924267 0 0 1 2.577067 0.6656c0.853333 0.256 1.706667 0.5632 2.525866 0.887467s1.706667 0.733867 2.423467 1.143466 1.553067 0.887467 2.286933 1.365334a29.678933 29.678933 0 0 1 4.1472 3.413333c0.631467 0.631467 1.245867 1.314133 1.809067 1.9968s1.092267 1.416533 1.5872 2.167467a23.773867 23.773867 0 0 1 1.365333 2.286933A26.112 26.112 0 0 1 307.2 694.613333c0.341333 0.8192 0.648533 1.706667 0.904533 2.5088s0.477867 1.706667 0.648534 2.594134a23.893333 23.893333 0 0 1 0.4096 2.6624c0 0.887467 0.136533 1.792 0.136533 2.679466s0 1.792-0.136533 2.679467a23.893333 23.893333 0 0 1-0.4096 2.6624 25.856 25.856 0 0 1-0.648534 2.577067 26.146133 26.146133 0 0 1-0.904533 2.525866 25.8048 25.8048 0 0 1-1.143467 2.4064 24.046933 24.046933 0 0 1-1.365333 2.304c-0.494933 0.733867-1.024 1.467733-1.5872 2.1504a26.965333 26.965333 0 0 1-5.956267 5.393067 23.773867 23.773867 0 0 1-2.286933 1.365333 27.665067 27.665067 0 0 1-4.949333 2.048c-0.836267 0.256-1.706667 0.477867-2.577067 0.6656s-1.706667 0.3072-2.6624 0.392534-1.792 0.0512-2.679467 0.0512zM604.7744 404.2752H361.813333a27.306667 27.306667 0 1 1 0-54.613333h242.961067a27.306667 27.306667 0 0 1 0 54.613333zM604.7744 568.32H361.813333a27.306667 27.306667 0 1 1 0-54.613333h242.961067a27.306667 27.306667 0 0 1 0 54.613333zM604.7744 732.279467H361.813333a27.306667 27.306667 0 0 1 0-54.613334h242.961067a27.306667 27.306667 0 0 1 0 54.613334zM750.062933 404.2752h-63.266133a27.306667 27.306667 0 1 1 0-54.613333h63.266133a27.306667 27.306667 0 0 1 0 54.613333zM750.062933 568.32h-63.266133a27.306667 27.306667 0 0 1 0-54.613333h63.266133a27.306667 27.306667 0 0 1 0 54.613333zM750.062933 732.279467h-63.266133a27.306667 27.306667 0 0 1 0-54.613334h63.266133a27.306667 27.306667 0 0 1 0 54.613334zM669.098667 242.6368H354.986667a47.786667 47.786667 0 0 1-47.786667-47.786667V149.026133a47.786667 47.786667 0 0 1 47.786667-47.786666h314.197333a47.786667 47.786667 0 0 1 47.786667 47.786666v45.824a47.786667 47.786667 0 0 1-47.872 47.786667z m-307.370667-54.613333h300.544V155.8528H361.813333z" fill="#76cb02" p-id="16048" data-spm-anchor-id="a313x.search_index.0.i11.129b3a81vaR55s" class=""></path></svg>
          <h2 class="row__title" style="margin-left: 10px; justify-content: flex-start;">数据列表</h2>
        </div>
      </div>
      <div class="row row--top-20">
        <!--表單:1为拍照打卡 2为扫描二维码 3为摄像头识别 4为答题类任务-->
        <div class="col-md-12">
          <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-top: 10px">
            <!--1.拍照打卡-->
            <el-tab-pane label="拍照打卡" name="1">
              <div class="table-container">
                <!-- 数据表单 -->
                <el-table :data="voucherList"
                          style="width: 100%;margin-top: 10px"
                          ref="multipleTable"
                          @selection-change="handleSelectionChange"
                          @header-contextmenu="cellClick">
                  <el-table-column fixed prop="id" align="center" width="120px"/>
                  <el-table-column label="学生ID" prop="studentId" align="center"/>
                  <el-table-column label="任务名称" prop="taskName" align="center"/>
                  <!--5为答题类任务正确率不够高，需要重做 4为待完成 3为待审核 2为已完成 1为已结束（任务过期但未做）-->
                  <el-table-column label="任务完成情况" prop="completionStatus" align="center" >
                    <template #default="scope">
                      <el-select v-model="scope.row.completionStatus" v-show="scope.row.iseditor" placeholder="" clearable>
                        <el-option
                            v-for="item in completionOptions"
                            :key="item.completionStatus"
                            :label="item.label"
                            :value="item.completionStatus">
                        </el-option>
                      </el-select>
                      <div>
                        <el-tag v-show="!scope.row.iseditor" class="mx-1" v-if="scope.row.completionStatus === 1">已结束</el-tag>
                        <el-tag v-show="!scope.row.iseditor" class="mx-1" v-if="scope.row.completionStatus === 2">已完成</el-tag>
                        <el-tag v-show="!scope.row.iseditor" class="mx-1" type="warning" v-if="scope.row.completionStatus === 3">待审核</el-tag>
                        <el-tag v-show="!scope.row.iseditor" class="mx-1" type="warning" v-if="scope.row.completionStatus === 4">待完成</el-tag>
                        <el-tag v-show="!scope.row.iseditor" class="mx-1" type="danger" v-if="scope.row.completionStatus === 5">答题类任务正确率不够高，需要重做</el-tag>
                      </div>
                    </template>
                  </el-table-column>
                  <!--拍照打卡类任务-管理员审核状态：1为待审核 2为已批准 3为已拒绝-->
                  <el-table-column label="管理员审核情况" prop="reviewStatus" align="center" width="140px">
                    <template #default="scope">
                      <div>
                        <el-tag class="mx-1" type="warning" v-if="scope.row.reviewStatus === 1">待审核</el-tag>
                        <el-tag class="mx-1" v-if="scope.row.reviewStatus === 2">已批准</el-tag>
                        <el-tag class="mx-1" type="danger" v-if="scope.row.reviewStatus === 3">已拒绝</el-tag>
                      </div>
                    </template>
                  </el-table-column>
                  <!--任务分配方式 1为按照学院分配 2为按照专业分配 3为按照班级分配 4为按照学生分配 5为随机分配-->
                  <el-table-column label="任务分配方式" prop="completionStatus" align="center" >
                    <template #default="scope">
                      <div>
                        <el-text class="mx-1" v-if="scope.row.taskAllocation === 1">按照学院分配</el-text>
                        <el-text class="mx-1" v-if="scope.row.taskAllocation === 2">按照专业分配</el-text>
                        <el-text class="mx-1" v-if="scope.row.taskAllocation === 3">按照班级分配</el-text>
                        <el-text class="mx-1" v-if="scope.row.taskAllocation === 4">按照学生分配</el-text>
                        <el-text class="mx-1" v-if="scope.row.taskAllocation === 5">随机分配</el-text>
                      </div>
                    </template>
                  </el-table-column>
                  <!--拍照打卡类任务-管理员的评论或反馈-->
                  <el-table-column fixed="right" align="center" width="120px">
                    <template #default="scope">
                      <!--編輯徽章按鈕-->
                      <svg version="1.1" class="table-row__edit" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                           viewBox="0 0 512.001 512.001" style="margin-top: 5px"
                           xml:space="preserve" data-toggle="tooltip" data-placement="bottom" title="Edit"
                           v-if="scope.row.showEditor" @click="edit(scope.row)"><g>	<g>
                    <path d="M496.063,62.299l-46.396-46.4c-21.2-21.199-55.69-21.198-76.888,0l-18.16,18.161l123.284,123.294l18.16-18.161    C517.311,117.944,517.314,83.55,496.063,62.299z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>
		<path d="M22.012,376.747L0.251,494.268c-0.899,4.857,0.649,9.846,4.142,13.339c3.497,3.497,8.487,5.042,13.338,4.143    l117.512-21.763L22.012,376.747z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>		<polygon points="333.407,55.274 38.198,350.506 161.482,473.799 456.691,178.568   " style="fill: rgb(1, 185, 209);"></polygon>	</g></g><g></g><g></g><g></g>
                        <g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
                      <!--保存徽章按鈕-->
                      <svg t="1707127122109" class="table-row__edit" viewBox="0 0 1024 1024" version="1.1"
                           xmlns="http://www.w3.org/2000/svg" p-id="6090"
                           v-if="scope.row.isEditor" @click="saves(scope.row)">
                        <path d="M896 0l-896 0 0 1024 1024 0 0-896-128-128zM512 128l128 0 0 256-128 0 0-256zM896 896l-768 0 0-768 64 0 0 320 576 0 0-320 74.97728 0 53.02272 53.02272 0 714.97728z" fill="#01b9d1" p-id="6091"></path></svg>
                      <!--查看詳情按鈕-->
                      <el-button type="text" @click="checkData(scope.$index, scope.row)" :class="['custom-button']">
                        <svg t="1708696256461" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             p-id="19713" data-spm-anchor-id="a313x.search_index.0.i43.5b243a81J42vG4" width="25" height="25"><path d="M900.3 521.728c-1.126-2.765-28.978-69.018-90.418-135.885-36.25-39.424-76.8-70.963-120.525-93.593-54.887-28.468-114.79-42.906-177.869-42.906-64.614 0-125.44 14.438-180.531 42.906-43.93 22.63-84.378 54.17-120.115 93.798-60.519 66.97-86.528 133.427-87.552 136.192l-3.38 8.806 4.506 8.295c1.331 2.457 32.87 59.801 96.051 117.657 37.171 34.1 77.824 61.236 120.627 80.692 53.76 24.473 111.104 36.966 170.496 36.966 58.573 0 115.508-12.39 169.268-36.966 42.7-19.456 83.456-46.695 120.934-80.692 63.693-57.753 96.256-115.097 97.587-117.452l4.813-8.704-3.891-9.114zM773.223 627.61c-34.406 30.924-71.475 55.603-110.182 73.216-48.128 21.81-99.02 32.87-151.45 32.87-53.145 0-104.55-11.06-152.78-32.87-38.81-17.613-75.674-42.19-109.67-73.114-44.954-40.858-73.012-82.33-83.764-99.635 8.909-19.456 33.485-67.891 76.902-115.712 32.359-35.635 68.813-63.898 108.237-84.173 49.05-25.19 103.22-37.888 161.075-37.888 56.218 0 109.466 12.8 158.31 37.888 39.322 20.275 75.982 48.64 109.057 84.378 44.032 47.616 69.837 95.948 79.462 115.61-11.366 17.51-40.038 58.674-85.197 99.43z" fill="#8a8a8a" p-id="19714" data-spm-anchor-id="a313x.search_index.0.i44.5b243a81J42vG4" class="selected"></path><path d="M511.59 349.491c-83.558 0-151.552 67.994-151.552 151.552s67.994 151.552 151.552 151.552 151.552-67.993 151.552-151.552S595.15 349.491 511.59 349.491z m0 262.144c-61.03 0-110.592-49.664-110.592-110.592 0-61.03 49.664-110.592 110.592-110.592 61.03 0 110.592 49.664 110.592 110.592 0 61.03-49.561 110.592-110.592 110.592z" fill="#01b9d1" p-id="19715" data-spm-anchor-id="a313x.search_index.0.i42.5b243a81J42vG4" class=""></path></svg> </el-button>
                    </template>
                  </el-table-column>
                  <template v-slot:empty>
                    <el-empty image-size="80"></el-empty>
                  </template>
                </el-table>
                <div class="block">
                  <!-- 页号 -->
                  <el-config-provider :locale="locale">  <!--切换语言包为中文包-->
                    <el-pagination
                        v-model:current-page="pageIndex"
                        v-model:page-size="pageSize"
                        :page-sizes="[5,10,15, 20]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalPage"
                        @size-change="sizeChangeHandle"
                        @current-change="CurrentChangeHandle"
                        style="margin-top: 30px"/>
                  </el-config-provider>
                </div>
              </div>
            </el-tab-pane>
            <!--2.扫描二维码-->
            <el-tab-pane label="扫描二维码" name="2">
              <div class="table-container">
                <!-- 数据表单 -->
                <el-table :data="fullDiscountList"
                          style="width: 100%;margin-top: 10px"
                          ref="multipleTable"
                          @selection-change="handleSelectionChange"
                          @header-contextmenu="cellClick">
                  <el-table-column fixed prop="id" align="center" width="120px"/>
                  <el-table-column label="学生ID" prop="studentId" align="center"/>
                  <el-table-column label="任务名称" prop="taskName" align="center"/>
                  <!--5为答题类任务正确率不够高，需要重做 4为待完成 3为待审核 2为已完成 1为已结束（任务过期但未做）-->
                  <el-table-column label="任务完成情况" prop="completionStatus" align="center" >
                    <template #default="scope">
                      <el-select v-model="scope.row.completionStatus" v-show="scope.row.iseditor" placeholder="" clearable>
                        <el-option
                            v-for="item in completionOptions"
                            :key="item.completionStatus"
                            :label="item.label"
                            :value="item.completionStatus">
                        </el-option>
                      </el-select>
                      <div>
                        <el-tag v-show="!scope.row.iseditor" class="mx-1" v-if="scope.row.completionStatus === 1">已结束</el-tag>
                        <el-tag v-show="!scope.row.iseditor" class="mx-1" v-if="scope.row.completionStatus === 2">已完成</el-tag>
                        <el-tag v-show="!scope.row.iseditor" class="mx-1" type="warning" v-if="scope.row.completionStatus === 3">待审核</el-tag>
                        <el-tag v-show="!scope.row.iseditor" class="mx-1" type="warning" v-if="scope.row.completionStatus === 4">待完成</el-tag>
                        <el-tag v-show="!scope.row.iseditor" class="mx-1" type="danger" v-if="scope.row.completionStatus === 5">答题类任务正确率不够高，需要重做</el-tag>
                      </div>
                    </template>
                  </el-table-column>
                  <!--任务分配方式 1为按照学院分配 2为按照专业分配 3为按照班级分配 4为按照学生分配 5为随机分配-->
                  <el-table-column label="任务分配方式" prop="completionStatus" align="center" >
                    <template #default="scope">
                      <div>
                        <el-text class="mx-1" v-if="scope.row.taskAllocation === 1">按照学院分配</el-text>
                        <el-text class="mx-1" v-if="scope.row.taskAllocation === 2">按照专业分配</el-text>
                        <el-text class="mx-1" v-if="scope.row.taskAllocation === 3">按照班级分配</el-text>
                        <el-text class="mx-1" v-if="scope.row.taskAllocation === 4">按照学生分配</el-text>
                        <el-text class="mx-1" v-if="scope.row.taskAllocation === 5">随机分配</el-text>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" align="center" width="160px">
                    <template #default="scope">
                      <!--編輯徽章按鈕-->
                      <svg version="1.1" class="table-row__edit" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                           viewBox="0 0 512.001 512.001" style="margin-top: 5px"
                           xml:space="preserve" data-toggle="tooltip" data-placement="bottom" title="Edit"
                           v-if="scope.row.showEditor" @click="edit(scope.row)"><g>	<g>
                    <path d="M496.063,62.299l-46.396-46.4c-21.2-21.199-55.69-21.198-76.888,0l-18.16,18.161l123.284,123.294l18.16-18.161    C517.311,117.944,517.314,83.55,496.063,62.299z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>
		<path d="M22.012,376.747L0.251,494.268c-0.899,4.857,0.649,9.846,4.142,13.339c3.497,3.497,8.487,5.042,13.338,4.143    l117.512-21.763L22.012,376.747z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>		<polygon points="333.407,55.274 38.198,350.506 161.482,473.799 456.691,178.568   " style="fill: rgb(1, 185, 209);"></polygon>	</g></g><g></g><g></g><g></g>
                        <g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
                      <!--保存徽章按鈕-->
                      <svg t="1707127122109" class="table-row__edit" viewBox="0 0 1024 1024" version="1.1"
                           xmlns="http://www.w3.org/2000/svg" p-id="6090"
                           v-if="scope.row.isEditor" @click="saves(scope.row)">
                        <path d="M896 0l-896 0 0 1024 1024 0 0-896-128-128zM512 128l128 0 0 256-128 0 0-256zM896 896l-768 0 0-768 64 0 0 320 576 0 0-320 74.97728 0 53.02272 53.02272 0 714.97728z" fill="#01b9d1" p-id="6091"></path></svg>
                      <!--查看詳情按鈕-->
                      <el-button type="text" @click="checkData(scope.$index, scope.row)" :class="['custom-button']">
                        <svg t="1708696256461" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             p-id="19713" data-spm-anchor-id="a313x.search_index.0.i43.5b243a81J42vG4" width="25" height="25"><path d="M900.3 521.728c-1.126-2.765-28.978-69.018-90.418-135.885-36.25-39.424-76.8-70.963-120.525-93.593-54.887-28.468-114.79-42.906-177.869-42.906-64.614 0-125.44 14.438-180.531 42.906-43.93 22.63-84.378 54.17-120.115 93.798-60.519 66.97-86.528 133.427-87.552 136.192l-3.38 8.806 4.506 8.295c1.331 2.457 32.87 59.801 96.051 117.657 37.171 34.1 77.824 61.236 120.627 80.692 53.76 24.473 111.104 36.966 170.496 36.966 58.573 0 115.508-12.39 169.268-36.966 42.7-19.456 83.456-46.695 120.934-80.692 63.693-57.753 96.256-115.097 97.587-117.452l4.813-8.704-3.891-9.114zM773.223 627.61c-34.406 30.924-71.475 55.603-110.182 73.216-48.128 21.81-99.02 32.87-151.45 32.87-53.145 0-104.55-11.06-152.78-32.87-38.81-17.613-75.674-42.19-109.67-73.114-44.954-40.858-73.012-82.33-83.764-99.635 8.909-19.456 33.485-67.891 76.902-115.712 32.359-35.635 68.813-63.898 108.237-84.173 49.05-25.19 103.22-37.888 161.075-37.888 56.218 0 109.466 12.8 158.31 37.888 39.322 20.275 75.982 48.64 109.057 84.378 44.032 47.616 69.837 95.948 79.462 115.61-11.366 17.51-40.038 58.674-85.197 99.43z" fill="#8a8a8a" p-id="19714" data-spm-anchor-id="a313x.search_index.0.i44.5b243a81J42vG4" class="selected"></path><path d="M511.59 349.491c-83.558 0-151.552 67.994-151.552 151.552s67.994 151.552 151.552 151.552 151.552-67.993 151.552-151.552S595.15 349.491 511.59 349.491z m0 262.144c-61.03 0-110.592-49.664-110.592-110.592 0-61.03 49.664-110.592 110.592-110.592 61.03 0 110.592 49.664 110.592 110.592 0 61.03-49.561 110.592-110.592 110.592z" fill="#01b9d1" p-id="19715" data-spm-anchor-id="a313x.search_index.0.i42.5b243a81J42vG4" class=""></path></svg> </el-button>
                    </template>
                  </el-table-column>
                  <template v-slot:empty>
                    <el-empty image-size="80"></el-empty>
                  </template>
                </el-table>
                <div class="block">
                  <!-- 页号 -->
                  <el-config-provider :locale="locale">  <!--切换语言包为中文包-->
                    <el-pagination
                        v-model:current-page="pageIndex1"
                        v-model:page-size="pageSize1"
                        :page-sizes="[5,10,15, 20]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalPage1"
                        @size-change="sizeChangeHandle1"
                        @current-change="CurrentChangeHandle1"
                        style="margin-top: 30px"/>
                  </el-config-provider>
                </div>
              </div>
            </el-tab-pane>
            <!--3.摄像头识别-->
            <el-tab-pane label="摄像头识别" name="3">
              <div class="table-container">
                <!-- 数据表单 -->
                <el-table :data="discountList"
                          style="width: 100%;margin-top: 10px"
                          ref="multipleTable"
                          @selection-change="handleSelectionChange"
                          @header-contextmenu="cellClick">
                  <el-table-column fixed prop="id" align="center" width="120px"/>
                  <el-table-column label="学生ID" prop="studentId" align="center"/>
                  <el-table-column label="任务名称" prop="taskName" align="center"/>
                  <!--5为答题类任务正确率不够高，需要重做 4为待完成 3为待审核 2为已完成 1为已结束（任务过期但未做）-->
                  <el-table-column label="任务完成情况" prop="completionStatus" align="center" >
                    <template #default="scope">
                      <el-select v-model="scope.row.completionStatus" v-show="scope.row.iseditor" placeholder="" clearable>
                        <el-option
                            v-for="item in completionOptions"
                            :key="item.completionStatus"
                            :label="item.label"
                            :value="item.completionStatus">
                        </el-option>
                      </el-select>
                      <div>
                        <el-tag v-show="!scope.row.iseditor" class="mx-1" v-if="scope.row.completionStatus === 1">已结束</el-tag>
                        <el-tag v-show="!scope.row.iseditor" class="mx-1" v-if="scope.row.completionStatus === 2">已完成</el-tag>
                        <el-tag v-show="!scope.row.iseditor" class="mx-1" type="warning" v-if="scope.row.completionStatus === 3">待审核</el-tag>
                        <el-tag v-show="!scope.row.iseditor" class="mx-1" type="warning" v-if="scope.row.completionStatus === 4">待完成</el-tag>
                        <el-tag v-show="!scope.row.iseditor" class="mx-1" type="danger" v-if="scope.row.completionStatus === 5">答题类任务正确率不够高，需要重做</el-tag>
                      </div>
                    </template>
                  </el-table-column>
                  <!--任务分配方式 1为按照学院分配 2为按照专业分配 3为按照班级分配 4为按照学生分配 5为随机分配-->
                  <el-table-column label="任务分配方式" prop="completionStatus" align="center" >
                    <template #default="scope">
                      <div>
                        <el-text class="mx-1" v-if="scope.row.taskAllocation === 1">按照学院分配</el-text>
                        <el-text class="mx-1" v-if="scope.row.taskAllocation === 2">按照专业分配</el-text>
                        <el-text class="mx-1" v-if="scope.row.taskAllocation === 3">按照班级分配</el-text>
                        <el-text class="mx-1" v-if="scope.row.taskAllocation === 4">按照学生分配</el-text>
                        <el-text class="mx-1" v-if="scope.row.taskAllocation === 5">随机分配</el-text>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" align="center" width="160px">
                    <template #default="scope">
                      <!--編輯徽章按鈕-->
                      <svg version="1.1" class="table-row__edit" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                           viewBox="0 0 512.001 512.001" style="margin-top: 5px"
                           xml:space="preserve" data-toggle="tooltip" data-placement="bottom" title="Edit"
                           v-if="scope.row.showEditor" @click="edit(scope.row)"><g>	<g>
                    <path d="M496.063,62.299l-46.396-46.4c-21.2-21.199-55.69-21.198-76.888,0l-18.16,18.161l123.284,123.294l18.16-18.161    C517.311,117.944,517.314,83.55,496.063,62.299z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>
		<path d="M22.012,376.747L0.251,494.268c-0.899,4.857,0.649,9.846,4.142,13.339c3.497,3.497,8.487,5.042,13.338,4.143    l117.512-21.763L22.012,376.747z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>		<polygon points="333.407,55.274 38.198,350.506 161.482,473.799 456.691,178.568   " style="fill: rgb(1, 185, 209);"></polygon>	</g></g><g></g><g></g><g></g>
                        <g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
                      <!--保存徽章按鈕-->
                      <svg t="1707127122109" class="table-row__edit" viewBox="0 0 1024 1024" version="1.1"
                           xmlns="http://www.w3.org/2000/svg" p-id="6090"
                           v-if="scope.row.isEditor" @click="saves(scope.row)">
                        <path d="M896 0l-896 0 0 1024 1024 0 0-896-128-128zM512 128l128 0 0 256-128 0 0-256zM896 896l-768 0 0-768 64 0 0 320 576 0 0-320 74.97728 0 53.02272 53.02272 0 714.97728z" fill="#01b9d1" p-id="6091"></path></svg>
                      <!--查看詳情按鈕-->
                      <el-button type="text" @click="checkData(scope.$index, scope.row)" :class="['custom-button']">
                        <svg t="1708696256461" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             p-id="19713" data-spm-anchor-id="a313x.search_index.0.i43.5b243a81J42vG4" width="25" height="25"><path d="M900.3 521.728c-1.126-2.765-28.978-69.018-90.418-135.885-36.25-39.424-76.8-70.963-120.525-93.593-54.887-28.468-114.79-42.906-177.869-42.906-64.614 0-125.44 14.438-180.531 42.906-43.93 22.63-84.378 54.17-120.115 93.798-60.519 66.97-86.528 133.427-87.552 136.192l-3.38 8.806 4.506 8.295c1.331 2.457 32.87 59.801 96.051 117.657 37.171 34.1 77.824 61.236 120.627 80.692 53.76 24.473 111.104 36.966 170.496 36.966 58.573 0 115.508-12.39 169.268-36.966 42.7-19.456 83.456-46.695 120.934-80.692 63.693-57.753 96.256-115.097 97.587-117.452l4.813-8.704-3.891-9.114zM773.223 627.61c-34.406 30.924-71.475 55.603-110.182 73.216-48.128 21.81-99.02 32.87-151.45 32.87-53.145 0-104.55-11.06-152.78-32.87-38.81-17.613-75.674-42.19-109.67-73.114-44.954-40.858-73.012-82.33-83.764-99.635 8.909-19.456 33.485-67.891 76.902-115.712 32.359-35.635 68.813-63.898 108.237-84.173 49.05-25.19 103.22-37.888 161.075-37.888 56.218 0 109.466 12.8 158.31 37.888 39.322 20.275 75.982 48.64 109.057 84.378 44.032 47.616 69.837 95.948 79.462 115.61-11.366 17.51-40.038 58.674-85.197 99.43z" fill="#8a8a8a" p-id="19714" data-spm-anchor-id="a313x.search_index.0.i44.5b243a81J42vG4" class="selected"></path><path d="M511.59 349.491c-83.558 0-151.552 67.994-151.552 151.552s67.994 151.552 151.552 151.552 151.552-67.993 151.552-151.552S595.15 349.491 511.59 349.491z m0 262.144c-61.03 0-110.592-49.664-110.592-110.592 0-61.03 49.664-110.592 110.592-110.592 61.03 0 110.592 49.664 110.592 110.592 0 61.03-49.561 110.592-110.592 110.592z" fill="#01b9d1" p-id="19715" data-spm-anchor-id="a313x.search_index.0.i42.5b243a81J42vG4" class=""></path></svg> </el-button>
                    </template>
                  </el-table-column>
                  <template v-slot:empty>
                    <el-empty image-size="80"></el-empty>
                  </template>
                </el-table>
                <div class="block">
                  <!-- 页号 -->
                  <el-config-provider :locale="locale">  <!--切换语言包为中文包-->
                    <el-pagination
                        v-model:current-page="pageIndex2"
                        v-model:page-size="pageSize2"
                        :page-sizes="[5,10,15, 20]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalPage2"
                        @size-change="sizeChangeHandle2"
                        @current-change="CurrentChangeHandle2"
                        style="margin-top: 30px"/>
                  </el-config-provider>
                </div>
              </div>
            </el-tab-pane>
            <!--4.线上答题-->
            <el-tab-pane label="线上答题" name="4">
              <div class="table-container">
                <!-- 数据表单 -->
                <el-table :data="exchangeList"
                          style="width: 100%;margin-top: 10px"
                          ref="multipleTable"
                          @selection-change="handleSelectionChange"
                          @header-contextmenu="cellClick">
                  <el-table-column fixed prop="id" align="center" width="120px"/>
                  <el-table-column label="学生ID" prop="studentId" align="center"/>
                  <el-table-column label="任务名称" prop="taskName" align="center"/>
                  <!--5为答题类任务正确率不够高，需要重做 4为待完成 3为待审核 2为已完成 1为已结束（任务过期但未做）-->
                  <el-table-column label="任务完成情况" prop="completionStatus" align="center" width="220px">
                    <template #default="scope">
                      <el-select v-model="scope.row.completionStatus" v-show="scope.row.iseditor" placeholder="" clearable>
                        <el-option
                            v-for="item in completionOptions"
                            :key="item.completionStatus"
                            :label="item.label"
                            :value="item.completionStatus">
                        </el-option>
                      </el-select>
                      <div>
                        <el-tag v-show="!scope.row.iseditor" class="mx-1" v-if="scope.row.completionStatus === 1">已结束</el-tag>
                        <el-tag v-show="!scope.row.iseditor" class="mx-1" v-if="scope.row.completionStatus === 2">已完成</el-tag>
                        <el-tag v-show="!scope.row.iseditor" class="mx-1" type="warning" v-if="scope.row.completionStatus === 3">待审核</el-tag>
                        <el-tag v-show="!scope.row.iseditor" class="mx-1" type="warning" v-if="scope.row.completionStatus === 4">待完成</el-tag>
                        <el-tag v-show="!scope.row.iseditor" class="mx-1" type="danger" v-if="scope.row.completionStatus === 5">答题类任务正确率不够高，需要重做</el-tag>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="学生获得总分" prop="totalScore" align="center"/>
                  <!--任务分配方式 1为按照学院分配 2为按照专业分配 3为按照班级分配 4为按照学生分配 5为随机分配-->
                  <el-table-column label="任务分配方式" prop="completionStatus" align="center" >
                    <template #default="scope">
                      <div>
                        <el-text class="mx-1" v-if="scope.row.taskAllocation === 1">按照学院分配</el-text>
                        <el-text class="mx-1" v-if="scope.row.taskAllocation === 2">按照专业分配</el-text>
                        <el-text class="mx-1" v-if="scope.row.taskAllocation === 3">按照班级分配</el-text>
                        <el-text class="mx-1" v-if="scope.row.taskAllocation === 4">按照学生分配</el-text>
                        <el-text class="mx-1" v-if="scope.row.taskAllocation === 5">随机分配</el-text>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column fixed="right" align="center" width="160px">
                    <template #default="scope">
                      <!--編輯徽章按鈕-->
                      <svg version="1.1" class="table-row__edit" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                           viewBox="0 0 512.001 512.001" style="margin-top: 5px"
                           xml:space="preserve" data-toggle="tooltip" data-placement="bottom" title="Edit"
                           v-if="scope.row.showEditor" @click="edit(scope.row)"><g>	<g>
                    <path d="M496.063,62.299l-46.396-46.4c-21.2-21.199-55.69-21.198-76.888,0l-18.16,18.161l123.284,123.294l18.16-18.161    C517.311,117.944,517.314,83.55,496.063,62.299z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>
		<path d="M22.012,376.747L0.251,494.268c-0.899,4.857,0.649,9.846,4.142,13.339c3.497,3.497,8.487,5.042,13.338,4.143    l117.512-21.763L22.012,376.747z" style="fill: rgb(1, 185, 209);"></path>	</g></g><g>	<g>		<polygon points="333.407,55.274 38.198,350.506 161.482,473.799 456.691,178.568   " style="fill: rgb(1, 185, 209);"></polygon>	</g></g><g></g><g></g><g></g>
                        <g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
                      <!--保存徽章按鈕-->
                      <svg t="1707127122109" class="table-row__edit" viewBox="0 0 1024 1024" version="1.1"
                           xmlns="http://www.w3.org/2000/svg" p-id="6090"
                           v-if="scope.row.isEditor" @click="saves(scope.row)">
                        <path d="M896 0l-896 0 0 1024 1024 0 0-896-128-128zM512 128l128 0 0 256-128 0 0-256zM896 896l-768 0 0-768 64 0 0 320 576 0 0-320 74.97728 0 53.02272 53.02272 0 714.97728z" fill="#01b9d1" p-id="6091"></path></svg>
                      <!--查看詳情按鈕-->
                      <el-button type="text" @click="checkData(scope.$index, scope.row)" :class="['custom-button']">
                        <svg t="1708696256461" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             p-id="19713" data-spm-anchor-id="a313x.search_index.0.i43.5b243a81J42vG4" width="25" height="25"><path d="M900.3 521.728c-1.126-2.765-28.978-69.018-90.418-135.885-36.25-39.424-76.8-70.963-120.525-93.593-54.887-28.468-114.79-42.906-177.869-42.906-64.614 0-125.44 14.438-180.531 42.906-43.93 22.63-84.378 54.17-120.115 93.798-60.519 66.97-86.528 133.427-87.552 136.192l-3.38 8.806 4.506 8.295c1.331 2.457 32.87 59.801 96.051 117.657 37.171 34.1 77.824 61.236 120.627 80.692 53.76 24.473 111.104 36.966 170.496 36.966 58.573 0 115.508-12.39 169.268-36.966 42.7-19.456 83.456-46.695 120.934-80.692 63.693-57.753 96.256-115.097 97.587-117.452l4.813-8.704-3.891-9.114zM773.223 627.61c-34.406 30.924-71.475 55.603-110.182 73.216-48.128 21.81-99.02 32.87-151.45 32.87-53.145 0-104.55-11.06-152.78-32.87-38.81-17.613-75.674-42.19-109.67-73.114-44.954-40.858-73.012-82.33-83.764-99.635 8.909-19.456 33.485-67.891 76.902-115.712 32.359-35.635 68.813-63.898 108.237-84.173 49.05-25.19 103.22-37.888 161.075-37.888 56.218 0 109.466 12.8 158.31 37.888 39.322 20.275 75.982 48.64 109.057 84.378 44.032 47.616 69.837 95.948 79.462 115.61-11.366 17.51-40.038 58.674-85.197 99.43z" fill="#8a8a8a" p-id="19714" data-spm-anchor-id="a313x.search_index.0.i44.5b243a81J42vG4" class="selected"></path><path d="M511.59 349.491c-83.558 0-151.552 67.994-151.552 151.552s67.994 151.552 151.552 151.552 151.552-67.993 151.552-151.552S595.15 349.491 511.59 349.491z m0 262.144c-61.03 0-110.592-49.664-110.592-110.592 0-61.03 49.664-110.592 110.592-110.592 61.03 0 110.592 49.664 110.592 110.592 0 61.03-49.561 110.592-110.592 110.592z" fill="#01b9d1" p-id="19715" data-spm-anchor-id="a313x.search_index.0.i42.5b243a81J42vG4" class=""></path></svg> </el-button>
                    </template>
                  </el-table-column>
                  <template v-slot:empty>
                    <el-empty image-size="80"></el-empty>
                  </template>
                </el-table>
                <div class="block">
                  <!-- 页号 -->
                  <el-config-provider :locale="locale">  <!--切换语言包为中文包-->
                    <el-pagination
                        v-model:current-page="pageIndex3"
                        v-model:page-size="pageSize3"
                        :page-sizes="[5,10,15, 20]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalPage3"
                        @size-change="sizeChangeHandle3"
                        @current-change="CurrentChangeHandle3"
                        style="margin-top: 30px"/>
                  </el-config-provider>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import axios from 'axios';
import {ElMessage} from "element-plus";
export default{
  name: "CouponList",
  data() {
    return {
      //1为拍照打卡 2为扫描二维码 3为摄像头识别 4为答题类任务
      // 拍照打卡列表的数据集合
      voucherList: [],
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      begin: 0,
      end: this.pageSize - 1,
      // 扫描二维码的数据集合
      fullDiscountList:[],
      pageIndex1: 1,
      pageSize1:5,
      totalPage1: 0,
      begin1: 0,
      end1: this.pageSize1 - 1,
      // 摄像头识别的数据集合
      discountList:[],
      pageIndex2: 1,
      pageSize2:5,
      totalPage2: 0,
      begin2: 0,
      end2: this.pageSize2 - 1,
      // 答题类任务的数据集合
      exchangeList:[],
      pageIndex3: 1,
      pageSize3:5,
      totalPage3: 0,
      begin3: 0,
      end3: this.pageSize3 - 1,

      dataForm: {
        badgeName:"",description:"",type:0,
        taskId:0,attributeId:0,attributeValue:0,
        badgeNumber:0,requirement:""
      },
      delDialogVisible:false,  //批量删除用户彈窗
      // 搜索框内容
      inputForm:{
        studentId: null,
        taskName: null,
        //任务分配方式 1为按照学院分配 2为按照专业分配 3为按照学生分配 4为按照学生分配 5为随机分配
        allocationOptions:[
          {taskAllocation: 1, label: '按照学院分配'}, {taskAllocation: 2, label: '按照专业分配'},
          {taskAllocation: 3, label: '按照学生分配'}, {taskAllocation: 4, label: '按照学生分配'},
          {taskAllocation: 5, label: '随机分配'}],
        taskAllocation: '',
        //5为答题类任务正确率不够高，需要重做 4为待完成 3为待审核 2为已完成 1为已结束（任务过期但未做）
        completionOptions:[
          {completionStatus: 1, label: '已结束'}, {completionStatus: 2, label: '已完成'},
          {completionStatus: 3, label: '待审核'}, {completionStatus: 4, label: '待完成'},
          {completionStatus: 5, label: '需要重做'}],
        completionStatus: '',
      },
      completionOptions:[
        {completionStatus: 1, label: '已结束'}, {completionStatus: 2, label: '已完成'},
        {completionStatus: 3, label: '待审核'}, {completionStatus: 4, label: '待完成'},
        {completionStatus: 5, label: '需要重做'}],
      completionStatus: '',
      type:1,
      //分页方法
      activeName: "1",// 当前选中的tab
      activeTab: '', // 存储当前激活的标签页的名称
      dynamicTabs: [], // 存储从后端获取的标签页信息
      currentPark: [],

      //屬性数据
      attributeList:[],
      //省份下拉框模型对象
      attributeName:'',

      value: false,
      disabledValue:false
    }
  },
  watch: {
    // 监听type变化
    type(newType, oldType) {
      if (newType !== oldType) {
        this.resetInputForm();
      }
    },
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      if(tab.props.name === "1"){
        this.activeTab = "1";
        this.type=1;
        this.getVoucherList();
      }else if(tab.props.name === "2"){
        this.activeTab = "2";
        this.type=2;
        this.getFullDiscountList();
      }else if(tab.props.name === "3"){
        this.activeTab = "3";
        this.type=3;
        this.getDiscountList();
      }else if(tab.props.name === "4"){
        this.activeTab = "4";
        this.type=4;
        this.getExchangeList();
      }
    },
    //0.分页方法
    getPageInfo(pageSize, pageNum) {
      return {
        "pageSize": pageSize,
        "pageNum": pageNum
      }
    },

    /*拍照打卡*/
    // 1.改变数组大小
    sizeChangeHandle(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;

      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getVoucherList();
      }
    },
    // 2.改变当前页号
    CurrentChangeHandle(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.voucherList = [];
      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getVoucherList();
      }
    },
    // 3.表格數據顯示
    async getVoucherList() {
      try {
        const pageInfo = this.getPageInfo(this.pageSize, this.pageIndex);
        console.log(pageInfo);

        const res = await axios.post('/studentTaskManage/getStudentPicTaskList', pageInfo);

        if (res.status === 200) {
          this.voucherList = res.data.data.list.map(item => {
            let showEditor=true;
            let iseditor=false;
            return {
              ...item,
              showEditor,
              iseditor
            };
          });
          this.totalPage = res.data.data.total;
        } else {
          console.error('Error fetching data:', res.statusText);
          ElMessage('获取拍照打卡任务数据失败');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('获取拍照打卡任务数据失败');
      }
    },

    /*扫描二维码*/
    // 1.改变数组大小
    sizeChangeHandle1(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize1 = val;

      if(this.inputForm!==null){
        console.log("你好");
        this.searchDataList();
      }
      else{
        console.log("空");
        this.getFullDiscountList();
      }
    },
    // 2.改变当前页号
    CurrentChangeHandle1(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex1 = val;
      this.achievementBadgeList = [];
      if(this.inputForm!==null){
        console.log("你好");
        this.searchDataList();
      }
      else{
        console.log("空");
        this.getFullDiscountList();
      }
    },
    // 3.表格數據顯示
    async getFullDiscountList() {
      try {
        const pageInfo = this.getPageInfo(this.pageSize1, this.pageIndex1);
        console.log(pageInfo);

        const res = await axios.post('/studentTaskManage/getStudentQRTaskList', pageInfo);

        console.log(res);

        if (res.status === 200) {
          this.fullDiscountList = res.data.data.list.map(item => {
            let showEditor=true;
            let iseditor=false;
            return {
              ...item,
              showEditor,
              iseditor
            };
          });
          this.totalPage1 = res.data.data.total;
        } else {
          console.error('Error fetching data:', res.statusText);
          ElMessage('获取学生扫描二维码任务数据失败');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('获取学生扫描二维码任务数据失败');
      }
    },

    /*摄像头识别*/
    // 1.改变数组大小
    sizeChangeHandle2(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize2 = val;

      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getDiscountList();
      }
    },
    // 2.改变当前页号
    CurrentChangeHandle2(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex2 = val;
      this.specialBadgeList = [];
      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getDiscountList();
      }
    },
    // 3.表格數據顯示
    async getDiscountList() {
      try {
        const pageInfo = this.getPageInfo(this.pageSize2, this.pageIndex2);
        console.log(pageInfo);

        const res = await axios.post('/studentTaskManage/getStudentCameraTaskList', pageInfo);

        console.log(res);

        if (res.status === 200) {
          this.discountList = res.data.data.list.map(item => {
            let showEditor=true;
            let iseditor=false;
            return {
              ...item,
              showEditor,
              iseditor
            };
          });
          this.totalPage2 = res.data.data.total;
        } else {
          console.error('Error fetching data:', res.statusText);
          ElMessage('获取学生摄像头识别任务数据失败');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('获取学生摄像头识别任务数据失败');
      }
    },

    /*线上答题*/
    // 1.改变数组大小
    sizeChangeHandle3(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize3 = val;

      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getExchangeList();
      }
    },
    // 2.改变当前页号
    CurrentChangeHandle3(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex3 = val;
      this.specialBadgeList = [];
      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getExchangeList();
      }
    },
    // 3.表格數據顯示
    async getExchangeList() {
      try {
        const pageInfo = this.getPageInfo(this.pageSize3, this.pageIndex3);
        console.log(pageInfo);

        const res = await axios.post('/studentTaskManage/getStudentQuizTaskList', pageInfo);

        console.log(res);

        if (res.status === 200) {
          this.exchangeList = res.data.data.list.map(item => {
            let showEditor=true;
            let iseditor=false;
            return {
              ...item,
              showEditor,
              iseditor
            };
          });
          this.totalPage3 = res.data.data.total;
        } else {
          console.error('Error fetching data:', res.statusText);
          ElMessage('获取学生线上答题任务数据失败');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('获取学生线上答题任务数据失败');
      }
    },

    resetInputForm() {
      this.inputForm = {
        studentId: null,
        taskName: null,
        taskAllocation: '',
        completionStatus: ''

      };
      this.typeValue= '';
    },

    /*查詢數據*/
    //1.定義查詢徽章信息
    searchBadgeInfo(pageSize,pageNum,studentId,taskName,taskAllocation,completionStatus){
      return {
        "pageSize": pageSize, "pageNum": pageNum, "studentId": studentId,
        "taskName":taskName, "taskAllocation":taskAllocation, "completionStatus":completionStatus
      };
    },

    //2.查询数据
    async searchDataList() {
      try {
        let searchData;  // 在此定义 searchData 变量，以便在后续使用

        console.log("查詢參數:",this.typeValue);
        //  console.log("查詢參數:attributeName:",attributeName,"badgeName:",badgeName,"type:",type,"typeValue:",this.typeValue);
        if (this.type === 1) {
          searchData = this.searchBadgeInfo(this.pageSize, this.pageIndex, this.inputForm.studentId, this.inputForm.taskName, this.inputForm.taskAllocation, this.inputForm.completionStatus);
        } else if (this.type === 2) {
          searchData = this.searchBadgeInfo(this.pageSize1, this.pageIndex1,this.inputForm.studentId, this.inputForm.taskName, this.inputForm.taskAllocation, this.inputForm.completionStatus);
        } else if (this.type === 3) {
          searchData = this.searchBadgeInfo(this.pageSize2, this.pageIndex2,this.inputForm.studentId, this.inputForm.taskName, this.inputForm.taskAllocation, this.inputForm.completionStatus);
        }else if (this.type === 4) {
          searchData = this.searchBadgeInfo(this.pageSize3, this.pageIndex3,this.inputForm.studentId, this.inputForm.taskName, this.inputForm.taskAllocation, this.inputForm.completionStatus);
        }
        console.log("查詢參數:",searchData);

          const res = await axios.post('/studentTaskManage/searchStudentTask', searchData);
          console.log("檢索返回值",res.status);
          //檢索成長徽章
          if(this.type === 1){
            if (res.status === 200) {
              this.voucherList = res.data.data.list;
              this.totalPage = res.data.data.total;
            } else {
              console.error('Error fetching data:', res.statusText);
              ElMessage('获取徽章数据失败');
            }
          }
          if(this.type === 2){
            if (res.status === 200) {
              this.fullDiscountList = res.data.data.list;
              this.totalPage1 = res.data.data.total;
            } else {
              console.error('Error fetching data:', res.statusText);
              ElMessage('获取徽章数据失败');
            }
          }
          if(this.type === 3){
            if (res.status === 200) {
              this.discountList = res.data.data.list;

              this.totalPage2 = res.data.data.total;
            } else {
              console.error('Error fetching data:', res.statusText);
              ElMessage('获取表单数据失败');
            }
          }
          if(this.type === 4){
            if (res.status === 200) {
              this.exchangeList = res.data.data.list;
              this.totalPage3 = res.data.data.total;
            } else {
              console.error('Error fetching data:', res.statusText);
              ElMessage('获取表单数据失败');
            }
          }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('出错了');
        if(this.type === 1)  this.getVoucherList();
        if(this.type === 2)  this.getFullDiscountList();
        if(this.type === 3)  this.getDiscountList();
        if(this.type === 4)  this.getExchangeList();
      }
    },
    //学生任务詳情
    checkData(index, row){
      this.$router.push({path:'/taskManagement/EdutaskDetail',query:{id:row.id}})
    },

    /*編輯優惠券信息*/
    //1.編輯按鈕
    edit(row) {
      row.iseditor = true;
      row.isEditor = true;
      row.showEditor = false;

    },
    //2.定義優惠券信息
    editBadgeInfo(id,completionStatus){
      return {
        "id":id,"completionStatus":completionStatus
      };
    },
    //3.保存修改
    async saves(row) {
      const editInfo = this.editBadgeInfo(row.id,row.completionStatus);

      console.log("編輯參數:",editInfo);

      try {
        const res = await axios.post('/studentTaskManage/updateStudentTask',editInfo);

        console.log('获取res数据:',res);
        if (res.data.code === 200) {
          ElMessage({
            message: '修改学生任务完成进度成功',
            type: 'success',
          });
          if(this.type === 1)  this.getVoucherList();
          if(this.type === 2)  this.getFullDiscountList();
          if(this.type === 3)  this.getDiscountList();
          if(this.type === 4)  this.getExchangeList();
        }if (res.data.code === 400) {
          this.$message.error(res.data);
          if(this.type === 1)  this.getVoucherList();
          if(this.type === 2)  this.getFullDiscountList();
          if(this.type === 3)  this.getDiscountList();
          if(this.type === 4)  this.getExchangeList();
        }
      } catch (error) {
        ElMessage({
          showClose: true,
          message: '出错了',
          type: 'warning',
        })
      }
      row.iseditor = false;
      row.isEditor = false;
      row.showEditor = true;

    },
    // Use the beforeCreate hook to initialize the 'end' property
    beforeCreate() {
      this.end = this.pageSize - 1;
      this.end1 = this.pageSize1 - 1;
      this.end2 = this.pageSize2 - 1;
      this.end3 = this.pageSize3 - 1;
    },
  },

  mounted() {
    this.getVoucherList();
  }
}
</script>

<style scoped lang="scss">
@import "@/theme/common.css";
@import "@/theme/commonTable.css";
</style>